<template>
  <div class="chart1Head-open">
    <div class="chart1-nav flex-v-center">
      <span
        v-for="(item, i) in chart1_nav_list"
        :key="i"
        :class="{ 'cns-active': i == cns_active}"
        @click="cnsHandle(i)"
      >
        {{ item }}
      </span>
      <el-popover
        placement="bottom"
        width="350"
        v-model="moreVisible"
        trigger="click"
      >
        <div slot="reference">
          <div
            style="padding: 3px 7px;"
            :class="{ 'cns-active': cns_active > 99 }"
          >
            {{ moreTxt }}
            <i class="el-icon-caret-bottom"></i>
          </div>
        </div>
        <div class="more-date flex-h-sb">
          <div class="md-chunk">
            <div class="md-tit">区间</div>
            <div
              class="md"
              :class="{ 'md-active': i + 100 == cns_active }"
              v-for="(item, i) in more_chart1_nav_list1"
              :key="item"
              @click="cnsHandle(i + 100, item)"
            >
              {{ item }}
            </div>
          </div>
          <div class="md-chunk">
            <div class="md-tit">年度</div>
            <div
              class="md"
              :class="{ 'md-active': i + 1000 == cns_active }"
              v-for="(item, i) in yearList"
              :key="item"
              @click="cnsHandle(i + 1000, item)"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { parseTime, deepClone } from '@/utils'
import { subMonths } from 'date-fns'

export default {
  props: {
    more_chart1_nav_list2: {
      type: Array,
      default: () => {
        return []
      },
    },
    chartDate: {
      type: Array,
      default: () => {
        return []
      },
    },
    oldDate: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  watch: {
    more_chart1_nav_list2: {
      handler(val) {
        this.yearList = []
        for (let i = val.length; i >= 0; i--) {
          this.yearList.push(val[i])
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      chart1_nav_list: [
        '成立以来',
        // '实盘以来',
        '同区间',
        '近一月',
        '近三月',
        '近半年',
        '近一年',
        '近两年',
        '今年以来',
      ],
      cns_active: 0,
      more_chart1_nav_list1: ['近三年', '近五年'],
      moreVisible: false,
      moreTxt: '更多',
      yearList: [],
    }
  },
  methods: {
    cnsHandle(i, txt) {
      if (this.cns_active == i) {
        return
      }
      this.cns_active = i
      this.moreVisible = false
      txt ? (this.moreTxt = txt) : (this.moreTxt = '更多')
      let dates = []
      switch (i) {
        case 0:
          dates = deepClone(this.oldDate)
          break
        // case 1:
        //   dates = deepClone(this.oldDate)
        //   break
        case 1:
          dates = deepClone(this.oldDate)
          break
        case 2:
          dates = [parseTime(subMonths(this.oldDate[1], 1)), this.oldDate[1]]
          break
        case 3:
          dates = [parseTime(subMonths(this.oldDate[1], 3)), this.oldDate[1]]
          break
        case 4:
          dates = [parseTime(subMonths(this.oldDate[1], 6)), this.oldDate[1]]
          break
        case 5:
          dates = [parseTime(subMonths(this.oldDate[1], 12)), this.oldDate[1]]
          break
        case 6:
          dates = [parseTime(subMonths(this.oldDate[1], 24)), this.oldDate[1]]
          break
        case 7:
          dates = [
            new Date(this.oldDate[1]).getFullYear() - 1 + '-12-31',
            this.oldDate[1],
          ]
          break
        case 100:
          dates = [parseTime(subMonths(this.oldDate[1], 36)), this.oldDate[1]]
          break
        case 101:
          dates = [parseTime(subMonths(this.oldDate[1], 60)), this.oldDate[1]]
          break
        default:
          if (txt && i > 999) {
            dates = [
              txt.slice(0, 4) - 1 + '-12-31',
              Number(txt.slice(0, 4)) + '-12-31',
            ]
          }
          break
      }
      const sameSection_res = i == 1
      this.$emit('sameSection', sameSection_res)
      this.$emit('update:chartDate', dates)
    },
  },
}
</script>

<style lang="scss" scoped>
.chart1Head-open {
  margin-bottom: 10px;
  position: absolute;
  z-index: 99;
  width: 65%;
  display: flex;
  justify-content: space-evenly;
  .chart1-nav {
    span {
      padding: 4.5px 7px;
      cursor: pointer;
      & + span {
        margin-left: 10px;
      }
    }
    .cns-active {
      color: #e1322d;
      background-color: #fcf5f5;
    }
    .gray {
      color: #bbb;
    }
  }
}
</style>
